<template>
  <div>
    <Modal
      width="300"
      v-model="del.modal"
      title="确认框"
      @on-ok="handleDelOk">
      <p>确认删除该记录？</p>
    </Modal>
    <Breadcrumb>
      <Breadcrumb-item href="/">首页</Breadcrumb-item>
      <Breadcrumb-item>角色列表</Breadcrumb-item>
    </Breadcrumb>
    <List :current="current" :columns="columns" :data="roles.roles.items"
          :total="roles.roles.total"
          @on-change="handlePageChange">
      <ListHeader>
        <ListOperations>
          <Button class="margin-right-sm" type="primary" @click="$router.push('form')">新增角色</Button>
        </ListOperations>
        <ListSearch>
          <Form ref="formInline" inline>
            <Form-item prop="name">
              <Input type="text" placeholder="请输入名称" v-model="search.name" style="width: 230px;"
                     @on-enter="handleSearch"/>
            </Form-item>
            <Form-item>
              <Button type="primary" @click="handleSearch">查询</Button>
            </Form-item>
          </Form>
        </ListSearch>
      </ListHeader>
    </List>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import Config from '@/config'
  import List, { ListHeader, ListOperations, ListSearch } from '@/components/List'
  // import Role from '@/service/app/role'

  export default {
    name: 'list',
    components: {
      List,
      ListHeader,
      ListOperations,
      ListSearch
    },
    data () {
      return {
        del: {
          modal: false,
          id: 0
        },
        search: {
          name: ''
        },
        current: 1,
        columns: [
          {
            title: 'ID',
            key: 'id',
            width: 140
          },
          {
            title: '名称',
            key: 'name',
            width: 140
          },
          {
            title: '备注',
            key: 'memo'
          },
          {
            title: '操作',
            key: 'action',
            width: 200,
            render: (h, params) => {
              let btnPerm = h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: () => {
                    this.handleEditPerm(params.row.id)
                  }
                }
              }, '权限')
              let btnEdit = h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: () => {
                    this.handleEdit(params.row.id)
                  }
                }
              }, '编辑')
              let btnDel = h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.handleDel(params.row)
                  }
                }
              }, '删除')
              return h('div', [
                btnPerm,
                btnEdit,
                btnDel
              ])
            }
          }
        ]
      }
    },
    computed: {
      ...mapState(['roles'])
    },
    created () {
      this.get()
    },
    methods: {
      get (current = 1) {
        this.$set(this, 'current', current)

        this.$store.dispatch('getRoles', {
          offset: (current - 1) * Config.PAGE_SIZE,
          limit: Config.PAGE_SIZE,
          ...this.search
        })
      },
      handlePageChange (current) {
        this.get(current)
      },
      handleSearch () {
        this.get()
        this.$set(this, 'current', 1)
      },
      handleEdit (id) {
        this.$router.push(`/roles/form/${id}`)
      },
      handleEditPerm (id) {
        this.$router.push(`/roles/perm/${id}`)
      },
      handleDel (role) {
        this.del.modal = true
        this.del.id = role.id
      },
      handleDelOk () {
        this.$store.dispatch('deleteRole', {
          id: this.del.id
        }).then(() => {
          this.$Message.success('删除成功！')
          this.get()
        })
      }
    }
  }
</script>
